import React, { useEffect } from "react";
import echarts from "echarts/lib/echarts";
import "echarts/lib/component/title";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/legend";
import "echarts/lib/chart/map";
import "echarts/lib/chart/effectScatter";
import "echarts/lib/chart/lines";
import china from "echarts/map/json/china.json";
import "echarts-gl";
echarts.registerMap("china", china);
import { citys, moveLines } from "./jsonData";
const JMapLine = props => {
  function initChart() {
    var myChart = echarts.init(document.getElementById("j_mapline"));
    let option = {
      backgroundColor: "#404a59",
      title: {
        text: "中央委员的教育迁徙",
        left: "center",
        top: "2%",
        textStyle: {
          color: "#4169E1"
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            show: true,
            excludeComponents: ["toolbox"],
            pixelRatio: 2
          }
        }
      },
      legend: {
        show: false,
        orient: "vertical",
        top: "bottom",
        left: "right",
        data: ["地点", "线路"],
        textStyle: {
          color: "#fff"
        }
      },
      geo: {
        map: "china",
        label: {
          emphasis: {
            show: false
          }
        },
        roam: false, // 是否开启鼠标缩放和平移漫游
        itemStyle: {
          normal: {
            areaColor: "#323c48",
            borderColor: "#404a59"
          },
          emphasis: {
            areaColor: "#2a333d"
          }
        }
      },
      series: [
        {
          name: "地点",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke"
          },
          label: {
            emphasis: {
              show: true,
              position: "right",
              formatter: "{b}"
            }
          },
          symbolSize: 2,
          showEffectOn: "render",
          itemStyle: {
            normal: {
              color: "#46bee9"
            }
          },
          data: citys
        },
        {
          name: "线路",
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 2,
          large: true,
          effect: {
            show: true,
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 3,
            trailLength: 0
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#58B3CC"
                  },
                  {
                    offset: 1,
                    color: "#F58158"
                  }
                ],
                false
              ),
              width: 1,
              opacity: 0.2,
              curveness: 0.1
            }
          },
          data: moveLines
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);
    // window.onresize = myChart.resize;
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  }
  useEffect(() => {
    initChart();
  }, []);
  return <div id="j_mapline" style={{ width: "100%", height: 500 }}></div>;
};

export default JMapLine;
